﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<link href="~/Content/jquery.Jcrop.css" rel="stylesheet" />
<script src="~/Scripts/jquery.Jcrop.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript">
    jQuery(function ($) {

        // The variable jcrop_api will hold a reference to the
        // Jcrop API once Jcrop is instantiated.
        var jcrop_api;

        // In this example, since Jcrop may be attached or detached
        // at the whim of the user, I've wrapped the call into a function
        initJcrop();

        // The function is pretty simple
        function initJcrop()//{{{
        {
            // Hide any interface elements that require Jcrop
            // (This is for the local user interface portion.)
            $('.requiresjcrop').hide();

            // Invoke Jcrop in typical fashion
            $('#target').Jcrop({
                onChange: showCoords,
                onRelease: releaseCheck
            }, function () {

                jcrop_api = this;
                jcrop_api.animateTo([100, 100, 400, 300]);

                // Setup and dipslay the interface for "enabled"
                $('#can_click,#can_move,#can_size').attr('checked', 'checked');
                $('#ar_lock,#size_lock,#bg_swap').attr('checked', false);
                $('.requiresjcrop').show();

            });

        };
        
        function showCoords(c) {
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        //}}}

        // Use the API to find cropping dimensions
        // Then generate a random selection
        // This function is used by setSelect and animateTo buttons
        // Mainly for demonstration purposes
        function getRandom() {
            var dim = jcrop_api.getBounds();
            return [
              Math.round(Math.random() * dim[0]),
              Math.round(Math.random() * dim[1]),
              Math.round(Math.random() * dim[0]),
              Math.round(Math.random() * dim[1])
            ];
        };

        // This function is bound to the onRelease handler...
        // In certain circumstances (such as if you set minSize
        // and aspectRatio together), you can inadvertently lose
        // the selection. This callback re-enables creating selections
        // in such a case. Although the need to do this is based on a
        // buggy behavior, it's recommended that you in some way trap
        // the onRelease callback if you use allowSelect: false
        function releaseCheck() {
            jcrop_api.setOptions({ allowSelect: true });
            $('#can_click').attr('checked', false);
        };

        // Attach interface buttons
        // This may appear to be a lot of code but it's simple stuff
        $('#setSelect').click(function (e) {
            // Sets a random selection
            jcrop_api.setSelect(getRandom());
        });
        $('#animateTo').click(function (e) {
            // Animates to a random selection
            jcrop_api.animateTo(getRandom());
        });
        $('#release').click(function (e) {
            // Release method clears the selection
            jcrop_api.release();
        });
        $('#disable').click(function (e) {
            // Disable Jcrop instance
            jcrop_api.disable();
            // Update the interface to reflect disabled state
            $('#enable').show();
            $('.requiresjcrop').hide();
        });
        $('#enable').click(function (e) {
            // Re-enable Jcrop instance
            jcrop_api.enable();
            // Update the interface to reflect enabled state
            $('#enable').hide();
            $('.requiresjcrop').show();
        });
        $('#rehook').click(function (e) {
            // This button is visible when Jcrop has been destroyed
            // It performs the re-attachment and updates the UI
            $('#rehook,#enable').hide();
            initJcrop();
            $('#unhook,.requiresjcrop').show();
            return false;
        });
        $('#unhook').click(function (e) {
            // Destroy Jcrop widget, restore original state
            jcrop_api.destroy();
            // Update the interface to reflect un-attached state
            $('#unhook,#enable,.requiresjcrop').hide();
            $('#rehook').show();
            return false;
        });

        // Hook up the three image-swapping buttons
        $('#img1').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
              .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('demo_files/sago.jpg');
            jcrop_api.setOptions({ bgOpacity: .6 });
            return false;
        });
        $('#img2').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
              .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('demo_files/pool.jpg');
            jcrop_api.setOptions({ bgOpacity: .6 });
            return false;
        });
        $('#img3').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
              .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('demo_files/sago.jpg', function () {
                this.setOptions({
                    bgOpacity: 1,
                    outerImage: 'demo_files/sagomod.jpg'
                });
                this.animateTo(getRandom());
            });
            return false;
        });

        // The checkboxes simply set options based on it's checked value
        // Options are changed by passing a new options object

        // Also, to prevent strange behavior, they are initially checked
        // This matches the default initial state of Jcrop

        $('#can_click').change(function (e) {
            jcrop_api.setOptions({ allowSelect: !!this.checked });
            jcrop_api.focus();
        });
        $('#can_move').change(function (e) {
            jcrop_api.setOptions({ allowMove: !!this.checked });
            jcrop_api.focus();
        });
        $('#can_size').change(function (e) {
            jcrop_api.setOptions({ allowResize: !!this.checked });
            jcrop_api.focus();
        });
        $('#ar_lock').change(function (e) {
            jcrop_api.setOptions(this.checked ?
        { aspectRatio: 4 / 3 } : { aspectRatio: 0 });
            jcrop_api.focus();
        });
        $('#size_lock').change(function (e) {
            jcrop_api.setOptions(this.checked ? {
                minSize: [350, 350],
                maxSize: [350, 350]
            } : {
                minSize: [350, 350],
                maxSize: [350, 350]
            });
            jcrop_api.focus();
        });

    });

    function saveImage() {

        //$('#x1').val(c.x);
        //$('#y1').val(c.y);
        //$('#x2').val(c.x2);
        //$('#y2').val(c.y2);
        //$('#w').val(c.w);
        //$('#h').val(c.h);
        
        $.ajax({
            url: "/Crop/SaveImage",
            type: 'post',
            data: '{ "W":"' + $('#w').val + '", "H":"200"}',
            contentType: 'application/json',
            success: function (result) {

                self.PicUrl(result.PicUrl);
            }
        });
    }
</script>

<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}

</style>

< <img src="/Images/sago.jpg" id="target" alt="[Jcrop Example]" />

  <div style="margin: .8em 0 .5em;">
    <span class="requiresjcrop">
      <button id="setSelect" class="btn btn-mini">setSelect</button>
      <button id="animateTo" class="btn btn-mini">animateTo</button>
      <button id="release" class="btn btn-mini">Release</button>
      <button id="disable" class="btn btn-mini">Disable</button>
    </span>
    <button id="enable" class="btn btn-mini" style="display:none;">Re-Enable</button>
    <button id="unhook" class="btn btn-mini">Destroy!</button>
    <button id="rehook" class="btn btn-mini" style="display:none;">Attach Jcrop</button>
  </div>

  <fieldset class="optdual requiresjcrop">
    <legend>Option Toggles</legend>
    <div class="optlist offset">
      <label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
      <label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
    </div>
    <div class="optlist">
      <label><input type="checkbox" id="can_click" />Allow new selections</label>
      <label><input type="checkbox" id="can_move" />Selection can be moved</label>
      <label><input type="checkbox" id="can_size" />Resizable selection</label>
    </div>
  </fieldset>

<fieldset class="requiresjcrop" style="margin: .5em 0;">
    <legend>Change Image</legend>
    <div class="btn-group">
        <button class="btn" id="img2">Pool</button>
        <button class="btn active" id="img1">Sago</button>
        <button class="btn" id="img3">Sago w/ outerImage</button>
    </div>
</fieldset>

<form id="coords" class="coords" onsubmit="return false;" action="http://example.com/post.php">

    <div class="inline-labels">
        <label>X1 <input type="text" size="4" id="x1" name="x1"></label>
        <label>Y1 <input type="text" size="4" id="y1" name="y1"></label>
        <label>X2 <input type="text" size="4" id="x2" name="x2"></label>
        <label>Y2 <input type="text" size="4" id="y2" name="y2"></label>
        <label>W <input type="text" size="4" id="w" name="w"></label>
        <label>H <input type="text" size="4" id="h" name="h"></label>
    </div>
</form>


<input type="button" value="save" onclick="saveImage()"/>